<template>
  <div class="bg">

    <div class="login">
      <h2 style="text-align: center">用户注册</h2>
      <a-form class="register-form" @submit="handleSubmit">
        <a-form-item v-bind="validateInfos.username" label="用户名">
          <a-input
              v-model:value="modelRef.username"
              @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
        <a-form-item v-bind="validateInfos.password" label="密码" has-feedback>
          <a-input type="password"
                   v-model:value="modelRef.password"
                   @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
        <a-form-item v-bind="validateInfos.confirm" label="确认密码" has-feedback>
          <a-input type="password"
                   v-model:value="modelRef.confirm"
                   @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" class="register-form-button">
            注册账号
          </a-button>
          <router-link :to="{path:'/toLogin'}"> 已有账号?去登陆</router-link>
        </a-form-item>
      </a-form>

    </div>

  </div>
</template>

<script>
import {defineComponent, reactive, ref} from 'vue';
import PmsApi from "@/components/login/js/PmsApi";
import {useRouter} from "vue-router";
import {useForm} from "ant-design-vue/es/form";
import {message} from "ant-design-vue";

export default defineComponent({
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const modelRef = reactive({
      username: '',
      password: undefined,
      confirm: undefined,
      nickname: ''
    });

    const handleConfirmBlur = function (e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    }

    const validateToNextPassword = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入密码');
      }
    };
    const compareToFirstPassword = async (_rule, value) => {
      if(modelRef.password !== value){
        return Promise.reject('两次密码输入不一致');
      }
    };
    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: '请输入用户名!',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
        },
        {
          validator: validateToNextPassword,
        },
      ],
      confirm: [
        {
          required: true,
          message: '请再次输入密码!',
        },
        {
          validator: compareToFirstPassword,
        },
      ],
    });
    const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef);

    const handleSubmit = () => {
      validate()
          .then(() => {
            PmsApi.register(modelRef).then(() => {
              message.success("注册成功");
              router.push('/toLogin');
            }, msg => {
              message.warning(msg);
            });
          })
          .catch(err => {
            console.log('error', err);
          });
    };

    return {
      modelRef,
      validate,
      validateInfos,
      confirmDirty: false,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 20},
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      handleSubmit,
      handleConfirmBlur,
    };
  },
});
</script>

<style>

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

.register-form-button {
  width: 100%;
}

</style>
